/**
 * PieCharts：每日执行记录
 */
import React  from 'react'
import style from './index.less'
import echarts from 'echarts'

import {IECharts} from '../../../../components'

const PieCharts=({
	data=[
					{value:335, name:'直接访问'},
					{value:310, name:'邮件营销'},
					{value:234, name:'联盟广告'},
					{value:135, name:'视频广告'},
					{value:1548, name:'搜索引擎'}
			],
	height=160
})=>{

	const myProps={
		option :  {
			color:['#5ab1ef', '#d87a80', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
			// title : {
      //   text: '某站点用户访问来源',
      //   subtext: '纯属虚构',
      //   x:'center'
	    // },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{b} : {c} ({d}%)"
	    },
			grid: {
				 left: '3%',
				 right: '4%',
				 bottom: '3%',
				 top:'3%',
				 containLabel: true
		 },
	    legend: {
	        orient: 'vertical',
					top: '30%',
	        left: '30%',
	        data: data.map(item=>item.name)
	    },
	    series : [
	        {
	            // name: '访问来源',
	            type: 'pie',
	            radius : '70%',
	            center: ['15%', '50%'],
	            data,
							label: {
                normal: {
                    show: false
                },
                // emphasis: {
                //     show: true
                // }
	            },
	            lableLine: {
	                normal: {
	                    show: false
	                },
	                // emphasis: {
	                //     show: true
	                // }
	            },
	            // itemStyle: {
	            //     emphasis: {
	            //         shadowBlur: 10,
	            //         shadowOffsetX: 0,
	            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
	            //     }
	            // }
	        }
	    ]
		}
	}

  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

PieCharts.propTypes={
	// data
}

export default PieCharts
